<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: chen_yt
 * @Date: 2022-07-22 15:43:24
 * @LastEditors: chen_yt
 * @LastEditTime: 2022-07-26 09:18:53
-->
<template>
  <div class="pwd-confirm-dialog-wrapper" v-if="visible">
    <div class="pwd-confirm-dialog-box">
      <div class="confirm-container">
        <div class="confirm-success-title">
          <i class="fks-icon-success"></i>{{ LANG.TIP_SUCCESS_MESSAGE }}
        </div>
        <div class="confirm-username-pwd">
          <div class="item">
            <div class="item-title">{{ LANG.ADMIN_NAME }}</div>
            <div class="item-content">{{ userInfo.name }}</div>
            <fks-button
              v-clipboard:copy="userInfo.name"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
              text
              icon="fks-icon-copy"
              class="item-paste-icon"
            />
          </div>
          <div class="item">
            <div class="item-title">{{ LANG.ADMIN_PWD }}</div>
            <div class="item-content">{{ userInfo.password }}</div>
            <fks-button
              v-clipboard:copy="userInfo.password"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
              text
              icon="fks-icon-copy"
              class="item-paste-icon"
            />
          </div>
        </div>
        <div class="confirm-record-tip">{{ LANG.TIP_RECORD_PWD }}</div>
        <fks-input
          v-model="input"
          :placeholder="LANG.TIP_PWD_CHECK"
          class="confirm-record-input"
        ></fks-input>
        <div class="confirm-record-error-tip" v-if="isPwdTipShow">
          {{ LANG.TIP_ERROR_PWD_CHECK }}
        </div>
        <div class="confirm-record-button">
          <fks-button primary @click="checkPwd">{{
            LANG.TIP_HAS_RECORD
          }}</fks-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VueClipboard from 'vue-clipboard2'
import Vue from 'vue'
Vue.use(VueClipboard)
export default {
  name: 'pwdConfirm',
  props: {
    userInfo: {
      type: Object,
      default() {
        return {
          name: '',
          password: ''
        }
      }
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      input: '',
      isPwdTipShow: false
    }
  },
  computed: {},
  watch: {},
  methods: {
    checkPwd() {
      if (this.input == this.userInfo.password) {
        this.isPwdTipShow = false
        this.close()
        return
      }
      this.isPwdTipShow = true
    },
    close() {
      this.$emit('hasRecord')
      this.$emit('update:visible', false)
    },
    /**
     * @description: 复制模板ID功能回调
     */
    onCopy(e) {
      this.$message({
        message: this.LANG.SUCCESS_COPY,
        type: 'success'
      })
    },
    onError(e) {
      this.$message({
        message: this.LANG.ERROR_COPY,
        type: 'error'
      })
    }
  },
  created() {},
  mounted() {}
}
</script>
<style lang="scss" scoped>
.pwd-confirm-dialog-wrapper {
  z-index: 110000 !important;
  position: fixed !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  margin: 0;
  background: rgba(#000, 0.12);
}
.pwd-confirm-dialog-box {
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  position: fixed;
  top: calc(50vh);
  left: calc(50vw);
  text-align: center;
  min-width: 474px;
  min-height: 344px;
  background: #ffffff;
  box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.12);
  border-radius: 16px;

  .confirm-container {
    position: relative;
    margin: 32px;
  }
}
.confirm-success-title {
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #191919;
  line-height: 20px;
  i {
    color: #40bb5a;
    margin-right: 8px;
  }
}
.confirm-username-pwd {
  background: #f7f7f7;
  border-radius: 4px;
  margin-top: 16px;
  .item {
    padding: 0 32px;
    display: flex;
    justify-content: center;
    &-title {
      height: 20px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 20px;
      flex-shrink: 0;
    }
    &-content {
      height: 20px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #555555;
      line-height: 20px;
      margin: 0 8px 0 16px;
      flex-shrink: 0;
    }
    &-paste-icon {
      height: 20px;
      padding: 0;
      color: #999999;
      flex-shrink: 0;
    }
    &:nth-child(1) {
      padding-top: 24px;
    }
    &:nth-child(2) {
      padding-top: 8px;
      padding-bottom: 24px;
    }
  }
}
.confirm-record-tip {
  margin-top: 24px;
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #191919;
  line-height: 20px;
}
.confirm-record-input {
  margin-top: 16px;
  text-align: center;
  width: 200px;
  ::v-deep .fks-input__inner {
    text-align: center;
  }
}
.confirm-record-button {
  margin-top: 16px;
}
.confirm-record-error-tip {
  margin-top: 16px;
  color: #ff4d4f;
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 20px;
}
</style>